<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="count++">累加</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      count: 1,
    };
  },
  /* 
    beforeUpdate触发条件：数据已经修改,视图还没有更新
      此时得到的数据和视图展示的数据是不一致 的
  */
  beforeUpdate() {
    console.log(this.count);
    debugger;
  },
  
  /* 
    在updated执行之前,vue已经根据新的数据重新渲染得到了一个新的虚拟DOM,然后根据diff算法,修改了真实DOM(视图展示)
    此时数据和视图已经保持一致了
  */
  updated() {
    console.log(this.count);
    debugger;
  },
};
</script>

<style>
</style>